<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>04 UI元素状态伪类选择器</title>
    <link rel="stylesheet" href="../common.css">
    <script src="../jquery-2.2.0.js"></script>
    <script src="../main.js"></script>
    <style>
        #normal input[type=text]:hover {/*鼠标移上去*/
            background-color: greenyellow;
        }

        #normal input[type=text]:focus {/*获得焦点后*/
            background-color: skyblue;
        }
        #normal input[type=text]:active {/*鼠标按下还未松开*/
            background-color: yellow;
        }

        #enable input[type=text]:enabled{/*启用的元素*/
            background-color: yellow;
        }
        #enable input[type=text]:disabled{/*禁用的元素*/
            background-color: gray;
        }
        #rw input[type=text]:read-only{/*只读元素*/
            background-color: lightgray;
        }
        #rw input[type=text]:read-write{/*非只读元素*/
            background-color: ghostwhite;
            /*outline: solid green 2px;*/
            border:2px blue solid;

        }

        #check input[type=checkbox]:checked{/*选中的单选复选框*/
            outline: solid green 2px;
        }
        #check input[type=radio]:default{/*默认选中的，但目前在chrome浏览器中不好用*/
            outline: solid orange 2px;
            color: red;
        }
        #check input[type=radio]:indeterminate{/*如果这些一个都没选择的话*/
            outline: solid red 2px;
        }

        #valid input[type=text]:valid{/*通过required等要求验证的*/
            background-color: white;
        }
        #valid input[type=text]:invalid{/*没有通过required等要求验证的*/
            background-color: #ffb08b;
        }
        
        #selection::selection{/*选中元素的文本部分，仅文本，而非整个元素*/
            color: yellow;
            background-color: red;
            text-shadow: 1px 1px 1px black;
        }

        #required input[type=text]:required{/*具有required属性的*/
            border:2px solid red;
        }
        #required span:after{
            content: " * ";
            color: red;
        }
        #required input[type=text]:optional{/*不具有required属性的*/
            border:2px solid lightgreen;
        }

        #range input[type=number]:in-range{/*在规定的范围内的*/
            background-color: lightgreen;
        }
        #range input[type=number]:out-of-range{/*超出规定范围的*/
            background-color: pink;
            border:2px solid red;
        }
    </style>
</head>
<body>
<h1>1-4 UI元素状态伪类选择器</h1>

<h3>下面表单输入框中分别设置了hover、focus、active三种状态。</h3>
<div id="normal">
    <strong>选择器：</strong><code>:hover</code><code>:focus</code><code>:active</code>
    <from>
        <p>姓名：<input type="text" name="name"></p>
        <p>地址：<input type="text" name="address"></p>
    </from>
    <hr>
</div>

<h3>下面表单输入框分别对应可用enabled、不可用disabled两种状态。</h3>
<div id="enable">
    <strong>选择器：</strong><code>:enabled</code><code>:disabled</code>
    <from>
        <p>
            <label for="radio1"><input id="radio1" type="radio" name="radio" onchange="radio_onChange()">可用</label>
            <label for="radio2"><input id="radio2" type="radio" name="radio"  onchange="radio_onChange()">不可用</label></p>
        <p>演示：<input id="text" type="text" name="address" disabled></p>
    </from>
    <!--<hr>-->
</div>
<h3>下面表单输入框分别对应只读read-only、可读写read-write两种状态。</h3>
<div id="rw">
    <strong>选择器：</strong><code>:read-only</code><code>:read-write</code>
    <from>
        <p>姓名：<input type="text" name="name" placeholder="默认的可读写"></p>
        <p>地址：<input type="text" name="address" readonly="readonly" placeholder="设置为只读模式"></p>
    </from>
    <!--<hr>-->
</div>

<h3>下面输入框分别对应选中checked、默认选中default、一个都没选中（具有相同name）三种状态</h3>
<div id="check">
    <strong>选择器：</strong><code>:checked</code><code>:default</code><code>:indeterminate</code>
    <p>
    <form>兴趣爱好：
        <input type="checkbox">看电影</input>
        <input type="checkbox" checked>听音乐</input>
        <input type="checkbox">爬山
        <input type="checkbox">踢足球
        <input type="checkbox">作诗
        <input type="radio" name="sex">男
        <input type="radio" name="sex">女
    </form>
    <!--<hr>-->
</div>

<h3>下面第一个输入框具有required验证属性（必须有输入才能验证通过，然后被选中），第二个没有</h3>
<div id="valid">
    <strong>选择器：</strong><code>:valid</code><code>:invalid</code>
    <from>
        <p>姓名：<input type="text" name="name" required></p>
        <p>地址：<input type="text" name="address" value="中国"></p>
    </from>
    <!--<hr>-->
</div>

<h3>下面第一个输入框具有required验证属性，第二个没有。<br>
    跟上面valid选择器的区别是，无论是否通过验证，只要具有required都会被选中</h3>
<strong>选择器：</strong><code>:required</code><code>:optional</code>
<div id="required">
    <from>
        <p>姓名：<span><input type="text" name="name" required></span></p>
        <p>地址：<input type="text" name="address" value="中国"></p>
    </from>
    <!--<hr>-->
</div>

<h3>下面的文字设置了选中部分的样式，选一下试试？</h3>
<strong>选择器：</strong><code>::selection</code>
<div id="selection">
    这里有一段文字，选中一部分试试？<br>
    这里有一段文字，选中一部分试试？<br>
    这里有一段文字，选中一部分试试？<br>
</div>

<h3>type="number"的input超出设定的范围时会被out-of-range选中，<br>
    在范围之内时会被in-range选中</h3>
<strong>选择器：</strong><code>:in-range</code><code>:out-of-range</code>
<div id="range">
    请输入60~100之间的数值：<input type="number" min="60" max="100">
</div>

<br><br><br>
<script>
    function radio_onChange() {
        var radio = document.getElementById("radio1");
        var text = document.getElementById("text");
        if (radio.checked){
            text.disabled = "";
        }else{
            text.value="";
            text.disabled = true;
        }
    }
</script>
</body>
</html>